<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

<!--    <span th:each="RegionStats:${data}">-->
<!--        <span th:text="${RegionStats.state}"></span>-->
<!--        <span th:text="${RegionStats.country}"></span>-->
<!--    </span>-->

    <div class="container">
        <h1 style="text-align: center">全球新型冠状病毒实时数据统计</h1>
        <p>全球总确诊人数：<span th:text="${latestTotalCases}"> </span></p>
        <p>全球总新增确诊人数：<span th:text="${diffFromPrevDay}"> </span></p>
        <p>当前时间：<span th:text="${#dates.format(nowTime, 'yyyy-MM-dd')}"> </span></p>
        <form class="form-inline" th:action="@{/}" style="padding: 20px 0px;">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control"  placeholder="请输入国家" name="country">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>州/省</th>
                <th class="right">国家</th>
                <th class="right">确诊人数</th>
                <th class="right">新增人数</th>
            </tr>
            </thead>

            <tbody th:each="RegionStats:${totalList}">
            <tr>
                <td th:text="${RegionStats.state}"> Bing</td>
                <td class="right" th:text="${RegionStats.country}">0:00:01</td>
                <td class="right" th:text="${RegionStats.latestTotalCases}">0,1 Mb</td>
                <td class="right" th:text="${RegionStats.diffFromPrevDay}">0 Mb</td>
            </tr>

            </tbody>

            <tfoot></tfoot>
        </table>
    </div>


</body>
</html>